<template>
  <div>
    <!-- 顶部搜索框
    Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在输入法中显示搜索按钮。
    -->
    <form action="/">
      <!-- 重新获取焦点时候不显示结果 -->
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
        @focus="isResultsShow = false"
      />
    </form>
    <!-- 搜索结果 -->
    <div class="searchResults" v-if="isResultsShow">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        border
      >
        <van-cell v-for="item in list" :key="item.art_id" :title="item.title" />
      </van-list>
    </div>

    <!-- 搜索联想 -->
    <div class="searchSuggestion" v-else-if="searchText.length !== 0">
      <van-cell
        icon="search"
        v-for="(result, index) in sugList"
        :key="index"
        @click="onSuggestion(result)"
      >
        <div slot="title" v-html="highlight(result)"></div
      ></van-cell>
    </div>

    <!-- 历史记录 -->
    <div class="searchHistory" v-else>
      <van-cell title="搜索记录">
        <!-- 全部删除控制 -->
        <div v-if="isDelete">
          <span @click="deleteAll">全部删除 </span>
          <span @click="isDelete = !isDelete">完成</span>
        </div>
        <van-icon
          v-else
          name="delete"
          size="17px"
          @click="isDelete = !isDelete"
        ></van-icon>
      </van-cell>
      <van-cell
        v-for="(h, index) in history"
        :key="index"
        :title="h"
        center
        @click="onSuggestion(h, index)"
      >
        <van-icon
          name="close"
          size="14px"
          style="color: #ddd"
          v-if="isDelete"
        ></van-icon>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  name: 'SearchArticle',
  data () {
    return {
      // 搜索框文字
      searchText: '',
      // 搜索记录
      history: [],
      // list数据
      list: [],
      loading: false,
      finished: false,
      // 联想建议列表
      sugList: [],
      // 控制之间的展示
      isResultsShow: false,
      page: 1,
      isDelete: false
    }
  },
  watch: {
    searchText: {
      // 通过lodash中的debounce函数进行防抖处理
      // 当一次输入字符过快时候，应等此次连续的输入结束后再发起请求，否则请求次数会过多且不必要
      handler: debounce(async function () {
        if (this.searchText.length > 0) {
          const { data: res } = await this.$https.get('/app/v1_0/suggestion', {
            params: {
              q: this.searchText
            }
          })
          this.sugList = res.data.options
        }
      }, 200)
      // handler简写
      // #region
      // async handler () {
      //   if (this.searchText.length > 0) {
      //     const { data: res } = await this.$https.get('/app/v1_0/suggestion', {
      //       params: {
      //         q: this.searchText
      //       }
      //     })
      //     this.sugList = res.data.options
      //   }
      // }
      // #endregion
    }
  },
  methods: {
    // 联想
    onSuggestion (str, index) {
      // 删除状态下
      if (this.isDelete) {
        this.history.splice(index, 1)
        sessionStorage.setItem('history', JSON.stringify(this.history))
      } else {
        // 否则进行结果搜索
        this.searchText = str
        this.isResultsShow = true
      }
    },
    // 历史记录全部删除
    deleteAll () {
      this.history = []
      sessionStorage.setItem('history', JSON.stringify(this.history))
      this.isDelete = !this.isDelete
    },
    // 搜索方法
    onSearch () {
      // 搜索之后添加进数组
      // 要求，最新的在最前面，且不能重复
      const index = this.history.indexOf(this.searchText)
      // 有则删除再添加，否则直接添加
      if (index !== -1) { this.history.splice(index, 1) }
      this.history.unshift(this.searchText)
      // 显示结果
      this.isResultsShow = true
      // 保存到本地会话
      sessionStorage.setItem('history', JSON.stringify(this.history))
    },
    // list加载方法
    async onLoad () {
      // 获取数据
      const { data: res } = await this.$https.get('/app/v1_0/search', {
        params: {
          page: this.page,
          per_page: 10,
          q: this.searchText
        }
      })
      // 添加数据
      this.list.push(...res.data.results)
      // 关闭加载
      this.loading = false
      // 若已经结束，则完成加载
      if (this.page * 10 < res.data.total_count) {
        this.page++
      } else this.finished = true
    },
    // 匹配字符高亮处理，通过v-html来插入，并用replace方法替换相应的值
    highlight (str) {
      // 第一个参数是匹配规则，或者匹配字符串
      return str.replaceAll(new RegExp(this.searchText, 'gi'), `<span style="color:red">${this.searchText}</span>`)
    }
  },
  async created () {
    if (sessionStorage.getItem('history')) { this.history = JSON.parse(sessionStorage.getItem('history')) }
    // 用户登录状态霞获取搜索历史
    // const { data: res } = await this.$https.get('/app/v1_0/search/histories')
  }
}
</script>

<style scoped lang="less">
/deep/.van-cell__value {
  vertical-align: middle;
}
</style>
